<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>event_slide</title>
<script src='../lib/jquery-2.1.1.js'></script>

<script>
$(document).ready(function(){
	$('#div1').css({
		'border':'2px ridge #ffddaa',
		'background-color': '#ddccaa',
		'width':'150px',
		'padding': '15px'
		
	});
	$('#btnSlideDown').click(function(){
		$('#div1').hide();
		$('#div1').slideDown('slow');
	});
	$('#btnSlideUp').click(function(){
		$('#div1').slideUp('slow');
		$('#div1').show(30000);
	});
	$('#btnSlideToggle').click(function(){
		$('#div1').slideToggle(500,function(){});
		
	});
});



</script>
</head>
<body>
<input type='button' value='Slide Down' id='btnSlideDown'>
<input type='button' value='Slide Up' id='btnSlideUp'>
<input type='button' value='Slide Toggle' id='btnSlideToggle'>
<p/>

<div id='div1'>
	<li>사과</li>
	<li>배</li>
	<li>바나나</li>
	<li>복숭아</li>
	<li>수박</li>
	<li>토마토</li>
	<li>참외</li>
	<li>딸기</li>
	<li>포도</li>
</div>
	
	

</body>
</html>